<template>
  <div id="app" @click="closeState">
    <page msg="聊天室项目"/>
  </div>
</template>

<script>
import page from './components/page'
import bus from './bus'

export default {
  name: 'App',
  components: {
    page
  },
  methods:{
    //点击页面任意地方关掉菜单
    closeState(){
      bus.$emit('close', false);
    }
  }
}
</script>

<style>
*{
  margin:0;
  padding:0;
  height:auto;
}
ol,ul,li{list-style:none;}
img{border:0;vertical-align:middle;}
a{color:#000000;text-decoration:none;}
input{
    border: none !important;
    background: none !important;
    outline: none !important;
}

.primarybtn{
    width: 90px;
    height: 30px;
    border-radius: 4px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    background: linear-gradient(134deg,#44baf8,#3596fc);
    box-shadow: 0 2px 6px #8dbff8;
    color: #fff;
}
.primarybtn.default{
    box-shadow: 0 2px 6px rgba(127,150,190,.49);
    color: #333;
    background: linear-gradient(125deg,#f5f5f5,#edeff3);
    margin-left:40px;
}
.primarybtn.disabled{
    opacity: .6;
    cursor: not-allowed;
}
.el-switch__core{
    height:14px;
}
.el-switch__core::after{
    width:12px;
    height:12px;
    top:0px;
}
.el-switch.is-checked .el-switch__core::after{
    margin-left:-13px;
}

#app{
  width:100%;
  height: 100vh;
}
.el-popover{
    padding: 0;
}
.user_popover{
  height:357px;
}
.menu_popover{
  min-width: 97px;
}
.el-popover .popper__arrow{
  display: none;
}
.el-dialog__header,.el-dialog__body{
  padding:0;
  overflow: hidden;
}
.qrcode_pop .el-dialog{
  border-radius: 4px;
  height:557px;
  background: url('assets/qrcode_bg.png');
  position:relative;
}
.choose_dialog{
  min-width: 10% !important;
  width:840px;
}
.info_line .el-select{
  flex:1;
  height:27px;
}
.info_line .el-input__inner{
  height:27px;
  font-size:12px;
}
.info_line .el-input__icon{
  line-height:27px;
}



.el-dialog{
  display: flex;
  flex-direction: column;
  margin:0 !important;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  max-height:calc(100% - 30px);
  max-width:calc(100% - 30px);
}
.el-dialog .el-dialog__body{
  flex:1;
  overflow: auto;
}
.el-dialog.bigPic_box{
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dialog.bigPic_box .el-dialog__body{
  display: flex;
  justify-content: center;
  align-items: center;
  padding:0px;
}
.el-dialog.bigVideo_box{
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dialog.bigVideo_box .el-dialog__body{
  display: flex;
  justify-content: center;
  align-items: center;
  padding:0px;
}


/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
	width: 6px;
	height: 16px;
	background-color: transparent;
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
	-webkit-box-shadow: transparent;
	border-radius: 14px;
	background-color: transparent;
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: transparent;
	background-color: #cacacb;
}

.input_line .el-input__inner{
  height: 27px;
  line-height: 27px;
  padding: 0 30px 0 7px;
}
.input_line .el-input__icon{
  line-height: 27px;
}

.cropper_dialog{
  position: relative;
}
.cropper .dialogBox{
  padding:12px;
}
.toolBox .copyright{
  display: none !important;
}
</style>
